var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var View;
(function (View) {
    var state;
    var Comment = (function (_super) {
        __extends(Comment, _super);
        function Comment() {
            _super.apply(this, arguments);
        }
        Comment.prototype.render = function () {
            return (React.createElement("div", {className: "comment"}, React.createElement("h2", {className: "commentAuthor"}, this.props.author), this.props.children));
        };
        return Comment;
    }(React.Component));
    View.Comment = Comment;
    var CommentList = (function (_super) {
        __extends(CommentList, _super);
        function CommentList() {
            _super.apply(this, arguments);
        }
        CommentList.prototype.render = function () {
            var commentNodes = this.props.data.map(function (node) {
                return (React.createElement(Comment, {author: node.author, key: node.id}, node.text));
            });
            return (React.createElement("div", {className: 'commentList'}, commentNodes));
        };
        return CommentList;
    }(React.Component));
    View.CommentList = CommentList;
    var CommentForm = (function (_super) {
        __extends(CommentForm, _super);
        function CommentForm() {
            var _this = this;
            _super.call(this);
            this.handleAuthorChange = function (e) {
                console.log('author changed', e.target.value);
                _this.setState({ author: '' + e.target.value });
            };
            this.handleTextChange = function (e) {
                console.log('text changed', _this);
                _this.setState({ text: e.target.value });
            };
            this.handleSubmit = function (e) {
                e.preventDefault();
                var author = _this.state.author;
                var text = _this.state.text;
                console.log(author, text);
                if (!author || !text) {
                    return;
                }
                _this.setState({ author: '', text: '' });
                _this.props.onCommentSubmit(author, text);
            };
            this.state = this.getInitialState();
        }
        CommentForm.prototype.getInitialState = function () {
            return { author: "z", text: "ha" };
        };
        CommentForm.prototype.render = function () {
            return (React.createElement("form", {className: 'commentForm', onSubmit: this.handleSubmit}, React.createElement("input", {type: 'text', placeholder: 'Your name', value: this.state.author, onChange: this.handleAuthorChange}), React.createElement("input", {type: 'text', placeholder: 'Say something...', value: this.state.text, onChange: this.handleTextChange}), React.createElement("input", {type: 'submit', value: 'Post'})));
        };
        return CommentForm;
    }(React.Component));
    View.CommentForm = CommentForm;
    var CommentBox = (function (_super) {
        __extends(CommentBox, _super);
        function CommentBox() {
            var _this = this;
            _super.apply(this, arguments);
            this.handleCommentSubmit = function (comment) {
                var comments = _this.state.data;
                console.log(comment);
                comment.id = Date.now();
                var newComments = comments.concat([comment]);
                _this.setState({ data: newComments });
                console.log(newComments);
                console.log(222);
                $.ajax({
                    url: _this.props.url,
                    dataType: 'json',
                    type: 'POST',
                    data: comment,
                    success: (function (data) {
                        _this.setState(data);
                    }).bind(_this),
                    error: (function (xhr, status, err) {
                        _this.setState({ data: comments });
                        console.error(_this.props.url, status, err.toString);
                    }).bind(_this)
                });
            };
        }
        CommentBox.prototype.getInitialState = function () {
            console.log("CommentBox getInitialState is called...state:" + JSON.stringify(this.state));
        };
        CommentBox.prototype.componentWillMount = function () {
            console.log("componentWillMount is called. state:" + JSON.stringify(this.state));
        };
        CommentBox.prototype.loadDataFromServer = function () {
            var _this = this;
            if (this.props.url) {
                $.ajax({
                    url: this.props.url,
                    dataType: 'json',
                    cache: false,
                    success: (function (data) {
                        console.log('from ajax:', data);
                        _this.setState({ data: data });
                    }).bind(this),
                    error: (function (data) {
                        console.log("Error: " + data);
                    }).bind(this)
                });
            }
        };
        CommentBox.prototype.componentDidMount = function () {
            console.log("componentDidMount is called. state:" + JSON.stringify(this.state));
            this.loadDataFromServer();
            var pollInterval = this.props.pollInterval;
            if (pollInterval) {
                setInterval(this.loadDataFromServer.bind(this), pollInterval);
            }
            else {
                setInterval(this.loadDataFromServer.bind(this), 5000);
            }
        };
        CommentBox.prototype.componentWillReceiveProps = function (nextProps, nextContext) {
            console.log(this.state);
            console.log('componentWillReceiveProps, nextProps:', nextProps, ' nextContext', nextContext);
        };
        CommentBox.prototype.componentWillUpdate = function (nextProps, nextState, nextContext) {
        };
        CommentBox.prototype.componentDidUpdate = function (nextProps, nextState, nextContext) {
        };
        CommentBox.prototype.componentWillUnmount = function () {
            console.log('componentWillUnmount');
        };
        CommentBox.prototype.render = function () {
            var data;
            if (this.state) {
                data = this.state.data;
            }
            else if (this.props) {
                data = this.props.data;
            }
            return (React.createElement("div", {className: 'commentBox'}, React.createElement("h1", null, "Comments"), React.createElement(CommentList, {data: data}), React.createElement(CommentForm, {onCommentSubmit: this.handleCommentSubmit})));
        };
        return CommentBox;
    }(React.Component));
    View.CommentBox = CommentBox;
})(View || (View = {}));
var GreeterN;
(function (GreeterN) {
    var GreeterC = (function (_super) {
        __extends(GreeterC, _super);
        function GreeterC() {
            _super.apply(this, arguments);
        }
        GreeterC.prototype.render = function () {
            var g = this.props.greeting;
            var greeting = 'Hello';
            if (typeof g === 'string') {
                greeting = g;
            }
            else if (g) {
                greeting = g();
            }
            return (React.createElement("div", null, greeting, ", ", this.props.whomToGreet));
        };
        return GreeterC;
    }(React.Component));
    GreeterN.GreeterC = GreeterC;
    var ContactList = (function (_super) {
        __extends(ContactList, _super);
        function ContactList() {
            _super.apply(this, arguments);
        }
        ContactList.prototype.render = function () {
            var contactData = this.props.data;
            var list = contactData.map(function (item) {
                return (React.createElement("li", null, item.name));
            });
            return (React.createElement("ol", null, list));
        };
        return ContactList;
    }(React.Component));
    GreeterN.ContactList = ContactList;
})(GreeterN || (GreeterN = {}));
$(function () {
    ReactDOM.render(React.createElement(View.Comment, {author: "yanhaijang"}), document.getElementById("do1"));
    var data = [
        { id: 1, author: "yan", text: "mmmm" },
        { id: 2, author: "niao", text: "eeee" }];
    ReactDOM.render(React.createElement(View.CommentList, {data: data}), document.getElementById("do2"));
    var f = function (author, text) {
        alert("test");
    };
    ReactDOM.render(React.createElement(View.CommentForm, {onCommentSubmit: f}), document.getElementById("do3"));
    var data1 = [
        { id: 1, author: "Pete Hunt", text: "This is one comment" },
        { id: 2, author: "Jordan Walke", text: "This is *another* comment" }
    ];
    ReactDOM.render(React.createElement(View.CommentBox, {data: data1, url: 'comments.json', pollInterval: 60000}), document.getElementById("do4"));
    var arr = [
        { name: "yyyy", relation: "222", phone: "18310765654" },
        { name: "rrrr", relation: "333", phone: "18310765654" }];
    ReactDOM.render(React.createElement(GreeterN.ContactList, {data: arr}), document.getElementById("do5"));
});
